<template>
  <div>
    <div class="article-head">
      <div class="page-continue">
        <div class="article-tittle">{{tittle}}</div>
        <el-button
          v-if="author.userid==userinfo.userid"
          type="primary"
          icon="el-icon-edit-outline"
          @click="artVisible=true"
          circle
        ></el-button>
      </div>
    </div>
    <div class="page-continue">
      <div class="panel article">
        <div class="inline">
          <div class="user">
            <img :src="author.headimg">
            <div class>{{author.nickname}}</div>
          </div>
          <div class="content" v-html="text"></div>
        </div>
        <div class="buttonline">
          <el-button @click="comment" type="text">评论</el-button>
        </div>
      </div>
      <div class="line">评论</div>
      <div class="comments">
        <div v-for="(item,index) in comments" :key="index" class="panel">
          <div class="inline">
            <div class="user">
              <img :src="item.author.headimage">
              <div class>{{item.author.nickname}}</div>
            </div>
            <div class="content" v-html="item.html"></div>
          </div>
          <div v-if="item.author.userid==userinfo.userid" class="buttonline">
            <el-button @click="editcommit(item)" type="text">编辑</el-button>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination
          layout="prev, pager, next"
          background
          @current-change="page"
          :page-count="maxpage"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="评论" :visible.sync="commentouterVisible">
      <Editor class="editor" v-model="commentText"></Editor>
      <div slot="footer" class="dialog-footer">
        <el-button @click="commentouterVisible = false">取 消</el-button>
        <el-button type="primary" @click="commentSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="commentouterVisible2">
      <Editor class="editor" v-model="commentText2"></Editor>
      <div slot="footer" class="dialog-footer">
        <el-button @click="commentouterVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="commentSubmit2">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="artVisible">
      <el-input v-model="form3.tittle"></el-input>
      <Editor class="editor" v-model="form3.text"></Editor>
      <div slot="footer" class="dialog-footer">
        <el-button @click="artVisible = false">取 消</el-button>
        <el-button type="primary" @click="editart">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userApi from "@/assets/api/user.js";
import noteApi from "@/assets/api/note.js";
import Editor from "@/components/Editor.vue";

export default {
  data() {
    return {
      noteid: null,
      tittle: "",
      author: {
        userid: "",
        nickname: "",
        headimg: "/default/headimage.jpg"
      },
      text: "",
      commentid: null,
      commentText2: "",
      comments: [],
      commentouterVisible: false,
      commentouterVisible2: false,
      artVisible: false,
      commentText: "",
      maxpage: 0,
      userinfo: {
        islogin: false
      },
      form3: {
        tittle: "",
        text: ""
      }
    };
  },
  components: {
    Editor
  },
  watch: {
    $route() {
      this.noteid = this.$route.params.id;
      this.init();
    }
  },
  mounted() {
    this.noteid = this.$route.params.id;
    this.init();
  },
  methods: {
    init() {
      userApi.statue().then(res => {
        if (res.data.success == 1) {
          this.userinfo.islogin = true;
          this.userinfo.userid = res.data.user.userid;
        }
      });
      noteApi.detialById(this.noteid).then(res => {
        if (res.data.success == 1) {
          this.tittle = res.data.data.tittle;
          this.form3.tittle = res.data.data.tittle;
          this.maxpage = res.data.maxPage;
          this.author.userid = res.data.data.author.userid;
          this.author.nickname = res.data.data.author.nickname;
          if (res.data.data.author.headimage != null)
            this.author.headimg = res.data.data.author.headimage;
          this.text = res.data.data.text;
          this.form3.text = res.data.data.text;
          this.comments = res.data.data.comments;
        }
      });
    },
    comment() {
      userApi.statue().then(res => {
        if (res.data.success == 0) {
          this.$message({
            type: "warning",
            message: "请先登陆"
          });
        } else {
          this.commentouterVisible = true;
        }
      });
    },
    commentSubmit() {
      userApi.comment(this.noteid, this.commentText).then(res => {
        this.commentouterVisible = false;
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.$router.go(-1);
        } else this.$message.error(res.data.message);
      });
    },
    page(page) {
      noteApi.comments(this.noteid, page).then(res => {
        this.comments = res.data.data;
      });
    },
    editcommit(item) {
      this.commentid = item.commentid;
      this.commentText2 = item.html;
      this.commentouterVisible2 = true;
    },
    editart() {
      userApi
        .noteedit(this.noteid, this.form3.text, this.form3.tittle)
        .then(res => {
          if (res.data.success == 1) {
            this.$message({
              type: "success",
              message: "成功"
            });
            this.artVisible = false;
            this.init();
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    commentSubmit2() {
      userApi.commentedit(this.commentid, this.commentText2).then(res => {
        if (res.data.success == 1) {
          this.$message({
            type: "success",
            message: "成功"
          });
          this.commentouterVisible2 = false;
          this.init();
        } else {
          this.$message.error(res.data.message);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/source.scss";
@import "@/assets/screen.scss";
.article-head {
  padding-top: 13vh;
  @media (max-width: $media-screen-width) {
    padding-top: 15vh;
  }
  padding-bottom: 1vh;
  margin-bottom: 4vh;
  background-image: url("../../assets/wallhaven-57300.jpg");
  background-position: center;
  background-size: cover;
  height: 30px;
  .el-button {
    float: right;
    position: relative;
    top: 1.9vh;
    z-index: 2;
  }
}
.article-tittle {
  color: #f0f0f0;
  font-size: 30px;
  font-weight: 700;
  float: left;
}
.panel {
  background-color: #ffffff;
  margin: 3vh 0;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: $box-shadow-type1;
  overflow: hidden;
}
.content {
  padding: 0 2%;
  width: 74%;
  float: left;
}
.inline {
  overflow: hidden;
}

.article {
  .user {
    margin-top: 5vh;
  }
  .content {
    margin: 3vh 0;
  }
}
.user {
  width: 20%;
  float: left;
  text-align: center;
  border-right: 1px solid rgba($color: #909399, $alpha: 0.8);
  img {
    width: 150px;
    height: 150px;
  }
}
.line {
  color: #909399;
  text-align: center;
  border-top: 2px dashed #909399;
  border-bottom: 2px dashed #909399;
  padding: 5px 0;
  margin: 10px 0;
}
.buttonline {
  text-align: right;
  overflow: hidden;
}
.editor {
  margin-bottom: 70px;
}
.page {
  text-align: center;
  padding: 2vh 0;
}
</style>